{include file="public/header" /}
<style>
    .layim-chat-main {
        height: 500px !important;
    }

    .current {
        color: red !important;
    }
    #image_shows{
        width: 100%;
        display:  block !important;
        height: auto !important;
        margin-top: 10px;
    }
    #image_shows img{
        width: 100%;
        height: 100%;
        display: block !important;
    }
    #image_shows p{
        position: relative;
        float: left;
        width: 80px;
        height: 80px;
        margin: 5px;
    }
    .close-img{
        position: absolute;
        top: -5px;
        right: -5px;
    }
    .layui-icon-close-fill{
        font-size: 26px;
    }
</style>
<body>
<div class="layui-fluid layui-anim-fadein">
    <div class="layui-card">
        <div class="layim-chat-main">
            <ul id="LAY_view">
                <li>
                    <div class="layim-chat-user">
                        <img src="/static/admin/images/default.png">
                        <cite>{$info.user.rname}<i>{$info.create_time}</i></cite></div>
                    <div class="layim-chat-text {if $info.id == $id}current{/if}">
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="padding: 5px;">{$info.comment}</div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                            {if $info.images}
                                {volist name="info.images" id="vo"}
                                <a href="javascript:;" class="layui-col-xs3 layui-col-sm3 layui-col-md3 openShowImg"  data-value="{$vo}" style="padding: 3px;">
                                <img src="{$vo}" class="layui-upload-img">
                                </a>
                                {/volist}
                            {/if}
                        </div>
                    </div>
                </li>
                {if $info.rcomment}
                <li class="layim-chat-mine">
                    <div class="layim-chat-user">
                        <img src="/static/admin/images/default.png">
                        <cite><i>{:date('Y-m-d H:i:s',$info.reply_time)}</i>{$info.admin_name}</cite></div>
                    <div class="layim-chat-text">
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="padding: 5px;">{$info.rcomment}</div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                            {if $info.list_images}
                                {volist name="info.list_images" id="vo"}
                                <a href="javascript:;" class="layui-col-xs3 layui-col-sm3 layui-col-md3 openShowImg"  data-value="{$vo}" style="padding: 3px;">
                                <img src="{$vo}" class="layui-upload-img">
                                </a>
                                {/volist}
                            {/if}
                        </div>
                    </div>
                </li>
                {/if}
            </ul>
        </div>

        <div class="layim-chat-footer">

            <div class="layim-chat-textarea">
                <textarea id="content" placeholder="输入回复内容"></textarea>
            </div>
            <div id="image_shows">
            </div>
            <div class="upload-btn" id="uploads_images" style="width: 80px; height: 80px; margin-top: 5px; float: left;">
                <i class="layui-icon layui-icon-addition" style="font-size: 25px; --color: inherit;"></i>
                <span>添加</span>
            </div>
            <input type="hidden" name="images" id="checkGallery_reply_images" value=""/>
            <div style="clear: both; width: 100%;"></div>
            <div class="layim-chat-bottom">
                <div class="layim-chat-send">
                    <span class="layim-send-btn">回复</span>
                </div>
            </div>
        </div>
    </div>
    <p style="color: red">*Tips:标红的为会员本次留言内容</p>
</div>
</body>
{include file="public/footer" /}
<link rel="stylesheet" href="/static/res/css/layim.css" media="all">
<script>
    $('.layim-chat-main').scrollTop($('.layim-chat-main')[0].scrollHeight);
    $('.layim-chat-send').click(function () {
        var content = $("#content").val();
        if (!content) {
            layer.msg('请填写回复内容');
            return false;
        }
        var  reply_images = $('#checkGallery_reply_images').val();
        var load = layer.load();
        $.ajax({
            type: 'POST',
            url: "{:url('save')}",
            data: {id:'{$id}',rcomment:content,reply_images:reply_images},
            dataType: "json",
            success: function (data) {
                layer.close(load);
                if(data.code == 1){
                    notify.success(data.msg,1500,function (){
                        location.reload();
                    });
                }else{
                    notify.error(data.msg);
                }
            }
        });
    });
    $('body').on('click', '.openShowImg', function () {
        var value = $(this).attr("data-value").split(',');
        var data = [];
        for (i in value) {
            data.push({src: value[i]});
        }
        layer.photos({
            photos: {"data": data, "start": 0}
            , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
            , closeBtn: 1,
        });
    });
   layui.upload.render({
        elem: '#uploads_images',
        url: '/' + $("#admin_map").val() + '/gallery/upload.html',
        data: {
            type: 1,
        },
        before: function (obj) {
            layer.load(2);
            var imgs = $("#checkGallery_reply_images").val()==''?[]:$("#checkGallery_reply_images").val().split(",");
            if(imgs.length>5){
                layer.msg('最多上传6张图片');
                setTimeout(function(){
                    layer.closeAll();
                },1000)
                return false;
            }
        },
        done: function (res) {
            const html = '<p><img src="'+ res.data +'"></img><span class="close-img"><i data-val="'+res.data+'" class="drop-del layui-icon layui-icon-close-fill"></i></span></p>';
            $('#image_shows').append(html);
            layer.closeAll();
            var imgs = $("#checkGallery_reply_images").val()==''?[]:$("#checkGallery_reply_images").val().split(",");
            if (res.code == 1) {
                layer.msg('上传成功');
                imgs.push(res.data);
                $("#checkGallery_reply_images").val(imgs.join(","));
            } else {
                return layer.msg('上传失败:' + res.msg);
            }

        },
        error: function () {
            return layer.msg('上传失败');
        }
    });
    $("#image_shows").on('click', '.drop-del', function () {
        var v = $(this).attr('data-val'), p = $("#checkGallery_reply_images");
        var val = p.val().split(',');
        var index = val.indexOf(v);
        index > -1 ? val.splice(index, 1) : '';
        p.val(val.join(','))
        $(this).parents('p').remove();
    });
</script>
</html>